<ion-view view-title="朋友" class="friend-view" hide-nav-bar="true">
    <div class="bar-header-box">
        <div class="bar bar-header bar-dark">
            <button class="button button-clear select-btn" ng-click="vm.enterSelect();">
                编辑
            </button>
            <div class="title title-center header-item">朋友</div>
            <button class="button button-clear">
                <i class="icon ion-ios-plus-outline"></i>
            </button>
        </div>
        <div class="bar bar-header bar-dark selection-bar">
            <button class="button button-clear select-btn" ng-click="vm.toggleAll();">
                {{vm.selectAllBtnText}}
            </button>
            <div class="title title-center header-item">{{vm.selectTitle}}</div>
            <button class="button button-clear" ng-click="vm.cancelSelect()">
                取消
            </button>
        </div>
    </div>
    <ion-content class="friend-list" delegate-handle="friend-content"
                 on-drag-right="vm.onDragRight($event);"
                 on-drag-left="vm.onDragLeft($event);"
                 on-release="vm.onRelease($event);">
        <ion-list>
            <ion-item class="item-avatar" ng-repeat="friend in vm.friends"
                      ng-click="vm.onItemClick(friend);"
                      ng-class="{'selected' : friend.selected && vm.status === 'selection'}">
                <img ng-src="{{friend.avatar}}">
                <h2>{{friend.name}}</h2>
                <p>{{friend.lastMessage}}</p>
                <ion-delete-button
                    ng-class="{'ion-ios-checkmark-outline' : !friend.selected, 'ion-ios-checkmark' : friend.selected}"
                    ng-click="vm.toggleSelect(friend);"></ion-delete-button>
            </ion-item>
        </ion-list>
    </ion-content>
    <div class="action-btn-box">
        <div class="row">
            <div class="col">
                <button class="button button-outline button-block button-assertive">
                    移除
                </button>
            </div>
            <div class="col">
                <button class="button button-outline button-block button-positive">
                    群聊
                </button>
            </div>
        </div>
    </div>
</ion-view>
